
.rect3d {
    position: relative;
    margin: auto;
    width: 100%;
    height: 200px;
    perspective: 200px;
    transform-style: preserve-3d;
    transform: rotateX(10deg);

    >ul {
        position: absolute;
        transform-style: preserve-3d;
        // transform-origin: 100px 100px;
        transform: rotateX(-33.5deg) rotateY(45deg);
       

        li {
            position: absolute;
            top: 0;
            left: 0;
            background: rgba(141, 214, 249);
            border: 1px solid #fff;
            list-style: none;
        }
    }

    &_out {
        top: 50%;
        left: 50%;
        width: 100px;
        height: 100px;
        margin: -50px 0 0 -50px;
        // transform-origin: 50px 50px;
        animation: fastspin 6s ease-in-out infinite 2s;

        li {
            height: 100px;
            width: 100px;
            opacity: 0.3;
        }

        :global {
            .top {
                transform: rotateX(90deg) translateZ(50px);
            }

            .bottom {
                transform: rotateX(90deg) translateZ(-50px);
            }

            .left {
                transform: rotateY(90deg) translateZ(50px);
            }

            .right {
                transform: rotateY(90deg) translateZ(-50px);
            }

            .front {
                // background: green;
                transform: translateZ(50px);
                opacity: 0.6;
            }

            .back {
                transform: translateZ(-50px);
            }
        }

    }

    &_inner {
        width: 50px;
        height: 50px;
        top: 50%;
        left: 50%;
        margin: -25px 0 0 -25px;
        // transform-origin: 25px 25px;
        animation: slowspin 6s ease-in-out infinite 2s;

        li {
            height: 50px;
            width: 50px;
        }

        :global {
            .top {
                transform: rotateX(90deg) translateZ(25px);
            }

            .bottom {
                transform: rotateX(90deg) translateZ(-25px);
            }

            .left {
                transform: rotateY(90deg) translateZ(25px);
            }

            .right {
                transform: rotateY(90deg) translateZ(-25px);
            }

            .front {
                // background: green;
                transform: translateZ(25px);
                opacity: 0.6;
            }

            .back {
                transform: translateZ(-25px);
            }
        }
    }

}

@keyframes fastspin {
    0% {
        transform: rotateX(-33.5deg) rotateY(45deg);
    }

    40%,
    to {
        transform: rotateX(-33.5deg) rotateY(-315deg);
    }
}

@keyframes slowspin {
    0% {
        transform: rotateX(-33.5deg) rotateY(45deg);
    }

    40%,
    to {
        transform: rotateX(-33.5deg) rotateY(315deg);
    }
}